<%@ page import="team.bluepen.supermarket.data.entity.User" %>
<%@ page import="team.bluepen.supermarket.constant.Constant" %>
<%@ page import="team.bluepen.supermarket.util.Log" %>
<%@ page import="team.bluepen.supermarket.constant.Role" %>
<%@ page import="team.bluepen.supermarket.web.listener.UserLoginListener" %>
<%@ page import="team.bluepen.supermarket.data.dao.GoodRepository" %>
<%@ page import="team.bluepen.supermarket.data.dao.abstraction.Repository" %>
<%@ page import="team.bluepen.supermarket.data.entity.Good" %>
<%@ page import="team.bluepen.supermarket.data.dao.UserRepository" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%--登陆后首页--%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="images/icon.ico" type="/image/x-icon" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
    <title>Overview - Supermarket Manage System</title>
    <%
        User user = (User) request.getSession().getAttribute(Constant.SESSION_USER);
    %>
</head>
<body>
<main>

    <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" style="width: 20%;min-width: 150px">
        <a href="${pageContext.request.contextPath}/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
            <span class="fs-4">Supermarket Manage System</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="overview.jsp" class="nav-link active" aria-current="page">
                    Overview
                </a>
            </li>
            <%
                if (user != null && user.getRole() == Role.ADMIN) {
            %>
            <li>
                <a href="account.jsp" class="nav-link link-dark">
                    Accounts
                </a>
            </li>
            <%
                }
            %>
            <li>
                <a href="manage.jsp" class="nav-link link-dark">
                    All Goods
                </a>
            </li>

            <li>
                <a href="query.jsp" class="nav-link link-dark">
                    Goods Query
                </a>
            </li>
            <li>
                <a href="file.jsp" class="nav-link link-dark">
                    File
                </a>
            </li>
        </ul>
        <hr>
        <div class="dropdown">
            <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
                <strong><%=user.getUsername()%></strong>
            </a>
            <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
                <li><a class="dropdown-item" href="setting.jsp">Settings</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><form method="post" action="api/logout-control">
                    <button class="dropdown-item" type="submit" value="logout" name="logout">Logout</button>
                </form></li>
            </ul>
        </div>
    </div>
    <div class="d-flex flex-column p-4 flex-grow-1 allow-rolling">
        <h1 class="flex-row">Overview</h1>
        <%
            if ( user.getRole() == Role.GUEST) {
        %>
        <h2> Currently in guest mode, unable to operate!</h2>
        <%
            }
        %>
        <hr>

        <h2>About the project</h2>
        <p>A supermarket manage system based on HBase.</p>
        <h2>Information</h2>
        <div class="d-flex flex-row card-group">
            <div class="flex-row card">
                <div class="card-body">
                    <h4 class="card-title">Users</h4>
                    <p class="card-text">Provide basic user management function.</p>
                    <div class="card-link">
                        <%
                            if (!(user.getRole() == Role.GUEST)) {
                        %>
                        <a href="account.jsp" class="btn btn-outline-primary">Manage Users</a>
                        <%} else {%>
                        <a href="account.jsp" class="btn btn-outline-primary disabled">Manage Users</a>
                        <%   }  %>
                    </div>
                </div>
            </div>
            <div class="flex-row card">
                <div class="card-body">
                    <h4 class="card-title">Goods</h4>
                    <p class="card-text">Provide goods management and other functions.</p>
                    <div class="card-link">
                        <%
                            if (!(user.getRole() == Role.GUEST)) {
                        %>
                        <a href="manage.jsp" class="btn btn-outline-primary">Manage Goods</a>
                        <%} else {%>
                        <a href="manage.jsp" class="btn btn-outline-primary disabled">Manage Goods</a>
                        <%   }  %>
                    </div>
                </div>
            </div>
            <div class="flex-row card">
                <div class="card-body">
                    <h4 class="card-title">File</h4>
                    <p class="card-text">Provide the service of uploading and downloading data files.</p>
                    <div class="card-link">
                        <%
                            if (!(user.getRole() == Role.GUEST)) {
                        %>
                        <a href="file.jsp" class="btn btn-outline-primary">File</a>
                        <%} else {%>
                        <a href="file.jsp" class="btn btn-outline-primary disabled">File</a>
                        <%   }  %>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <h2>Data</h2>
        <div class="d-flex flex-row card-group">
            <div class="flex-row card">
                <div class="card-body">
                    <h4 class="card-title">All Users</h4>
                    <%UserRepository userRepository = new UserRepository();%>
                    <h2 class="card-text text-primary"><%=userRepository.query().size()%></h2>
                </div>
            </div>
            <div class="flex-row card">
                <div class="card-body">
                    <h4 class="card-title">Current Online</h4>
                    <h2 class="card-text text-primary"><%=UserLoginListener.getOnlineUsers().size()%></h2>
                </div>
            </div>
            <div class="flex-row card">
                <div class="card-body">
                    <h4 class="card-title">Goods</h4>
                    <%Repository<Good> goodRepository = new GoodRepository();%>
                    <h2 class="card-text text-primary"><%=goodRepository.query().size()%></h2>
                </div>
            </div>
        </div>
        <br><h2>Online User List</h2>
        <div class="d-flex flex-row">
            <table class="table table-hover">
                <thead class="table table-hover" >
                <tr><th>ID</th>
                    <th>Username</th>
                </tr>
                </thead>
                <tbody>
                <%
                    for (User u: UserLoginListener.getOnlineUsers()){
                %>
                <tr>
                    <td><%=u.getId()%></td>
                    <td><%=u.getUsername()%></td>
                </tr>
                <%}
                %>
                </tbody>
            </table>
        </div>
    </div>


</main>

</body>
</html>
